<template>
  <div class="container">
    <!-- 第一行 -->
    <div class="row">
      <div class="col-left">
        <div class="box system-time-box">
          <div class="title">系统运行时间</div>
          <div class="content">
            <div class="system-time-wrap">
              <div class="value">
                {{ softRunEvnData.sysRunTime }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-left">
        <div class="box cpu-box">
          <div class="title">CPU核数</div>
          <div v-if="softRunEvnData" class="content">
            {{ softRunEvnData && softRunEvnData.cpuCoreNum }}
          </div>
        </div>
        <div class="box">
          <div class="title">内存总量</div>

          <div class="content">
            <div class="memory-wrap">
              <div class="value">
                {{ softRunEvnData && softRunEvnData.memTotal }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-right">
        <div class="box">
          <div class="title">内存使用率</div>
          <div
            v-if="softRunEvnData"
            class="content"
            style="font-size: 60px; font-weight: 600"
          >
            <!-- <PieChart :value="softRunEvnData.memUsageRate" /> -->
            {{ softRunEvnData.memUsageRate }}
          </div>
        </div>
      </div>
      <div class="col-right">
        <div class="box system-load-box">
          <div class="title">C 盘</div>
          <div class="content">
            <div class="content-item">
              <div v-if="softRunEvnData" class="value">
                {{ softRunEvnData.cdisk.total }}
              </div>
              <div class="name">硬盘总量</div>
            </div>
            <div class="content-item">
              <div v-if="softRunEvnData" class="value">
                {{ softRunEvnData.cdisk.usage }}
              </div>
              <div class="name">使用率</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-right">
        <div class="box system-load-box">
          <div class="title">D 盘</div>
          <div class="content">
            <div class="content-item">
              <div v-if="softRunEvnData" class="value">
                {{ softRunEvnData.ddisk.total }}
              </div>
              <div class="name">硬盘总量</div>
            </div>
            <div class="content-item">
              <div v-if="softRunEvnData" class="value">
                {{ softRunEvnData.ddisk.usage }}
              </div>
              <div class="name">使用率</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二行 -->
    <div class="row">
      <div class="col-half">
        <div class="box">
          <div class="title">CPU使用率</div>
          <div class="content">
            <AreaChart :chart-data="cpuSysUsageAxis" :color="'#1890ff'" />
          </div>
        </div>
      </div>
    </div>

    <!-- 第三行 -->
    <div class="row">
      <div class="col-third">
        <div class="box">
          <div class="title">网络宽带</div>
          <div class="content">
            <LineChart
              :chart-data="netRateAxis"
              :colors="['#FFD700', '#32CD32']"
              :series-names="['上传', '下载']"
            />
          </div>
        </div>
      </div>
      <div class="col-third">
        <div class="box">
          <div class="title">数据源连接</div>
          <div class="content">
            <AreaChart :chart-data="dataSourceAxis" :color="'#1890ff'" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AreaChart from "./components/AreaChart.vue";
import LineChart from "./components/LineChart.vue";
import { getSoftRunEvn } from "@/api/statusMonitor";
export default {
  name: "SoftMonitor",
  components: {
    AreaChart,
    LineChart,
  },
  data() {
    return {
      // 全量数据
      refreshTimer: null,
      // CPU使用率
      cpuSysUsageAxis: {
        xData: [],
        yData: [],
      },
      // 网络宽带
      netRateAxis: {
        xData: [],
        yData: [
          [], // 上传
          [], // 下载
        ],
      },
      // 数据源连接
      dataSourceAxis: {
        xData: [],
        yData: [],
      },
      softRunEvnData: {
        sysRunTime: "5:1:1h", // 系统运行时间
        cpuCoreNum: "8", // CPU核数
        memTotal: "31.2GB", // 内存总量
        memUsageRate: "88.88%", // 内存使用率
        cpuSysUsageAxis: {
          // CPU系统使用率
          xData: ["13:10", "13:11"],
          yData: [60, 70],
        },
        netRateAxis: {
          // 网络速率
          xData: ["13:10", "13:11", "13:13", "13:15"],
          yData: [
            [11.5, 41, 22, 55],
            [12, 14, 33, 77],
          ],
        },
        dataSourceAxis: {
          // 数据源连接数
          xData: ["13:10", "13:11"],
          yData: [50, 51],
        },
        cdisk: {
          // C盘磁盘信息
          total: "125.69GB", // 硬盘总量
          usage: "96.74%", // 使用率
        },
        ddisk: {
          // D盘磁盘信息
          total: "255.69GB", // 硬盘总量
          usage: "90.74%", // 使用率
        },
      },
    };
  },
  mounted() {
    this.getSoftRunEvn();
    this.startRefreshTimer();
  },
  beforeDestroy() {
    this.clearRefreshTimer();
  },
  methods: {
    startRefreshTimer() {
      this.refreshTimer = setInterval(() => {
        this.getSoftRunEvn();
      }, 3000);
    },
    clearRefreshTimer() {
      if (this.refreshTimer) {
        clearInterval(this.refreshTimer);
        this.refreshTimer = null;
      }
    },
    getSoftRunEvn() {
      getSoftRunEvn()
        .then((res) => {
          const code = res.code;
          const data = res.data;
          if (code === 200) {
            this.softRunEvnData = data;
            this.cpuSysUsageAxis = data.cpuSysUsageAxis;
            this.netRateAxis = data.netRateAxis;
            this.dataSourceAxis = data.dataSourceAxis;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 12px 12px 0;
  height: 100%; // 减去上下padding
  display: flex;
  flex-direction: column;

  .row {
    display: flex;
    margin-bottom: 12px;
    gap: 12px;
    flex: 1; // 让每行平均分配高度

    .box {
      padding: 12px;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: url("~@/assets/images/statusMonitor/borderBg.png") no-repeat
        center center;
      background-size: 100% 100%;

      &.system-time-box {
        background: url("~@/assets/images/statusMonitor/systemTimeBg.png")
          no-repeat center center;
        background-size: 100% 100%;
      }
      &.cpu-box {
        background: url("~@/assets/images/statusMonitor/CPU.png") no-repeat 40%
            center,
          url("~@/assets/images/statusMonitor/CPUBg.png") no-repeat center
            center;
        background-size: auto auto, 100% 100%;
        position: relative;
        .content {
          font-size: 70px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-5%, -52%);
          margin: 0;
        }
      }

      &.system-load-box {
        background: url("~@/assets/images/statusMonitor/systemLoadBg.png")
          no-repeat center center;
        background-size: 100% 100%;
        .content {
          padding-bottom: 60px;
          justify-content: space-evenly;
          .content-item {
            text-align: center;
            .value {
              margin-bottom: 10px;
              font-weight: 600;
              font-size: 24px;
            }
            .name {
              letter-spacing: 2px;
            }
          }
        }
      }

      .title {
        margin: 0 0 8px 0;
        font-size: 16px;
        font-weight: bold;
        background: linear-gradient(to bottom, #f0f0f0, #00e4ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        letter-spacing: 0.15em;
      }

      .content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        .system-time-wrap,
        .memory-wrap {
          display: flex;
          align-items: flex-end; // 添加这行使子元素底部对齐
          .value {
            font-size: 80px;
            line-height: 1; // 确保行高不会影响对齐
          }
          .unit {
            font-size: 24px;
            font-weight: bolder;
            margin-bottom: 6px; // 微调单位位置使其视觉上对齐
          }
        }
      }
    }

    // 第一行特殊比例
    &:first-child {
      flex: 1.05;

      > .col-left {
        flex: 1 0 calc(25% - 9px);
        display: flex;
        flex-direction: column;
        gap: 12px;

        .box {
          flex: 1;
          height: auto;
        }
      }

      > .col-right {
        flex: 1 0 calc(16.666% - 9px); // ~16.666% width minus half of gap
      }
    }

    // 第二行
    &:nth-child(2) {
      flex: 0.9;

      .col-half {
        flex: 1 0 calc(50% - 6px); // 50% width minus half of gap
      }
    }

    // 第三行
    &:nth-child(3) {
      flex: 1.05; // 第三行稍矮

      .col-third {
        flex: 1 0 calc(33.333% - 8px); // ~33.333% width minus gap adjustment
      }
    }
  }
}
</style>
